import { Card, Pagination } from 'antd';
import equal from "deep-equal"
import { toJS } from 'mobx';
import { inject, observer } from 'mobx-react';
import ContactRemarkItemStore from './../../stores/ContactRemarkItemStore'
import { WeaLocaleProvider, WeaZmage, WeaTools, WeaTextarea, WeaError } from 'ecCom';
let Base64 = WeaTools.Base64
const getLabel = WeaLocaleProvider.getLabel;

@observer
export default class ContactRemarkItem extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            store: new ContactRemarkItemStore(),
        }
    }
    componentWillMount() {
        const { store } = this.state;
        const { doInit } = store;
        doInit(this);
    }

    button = {
        width: "50px",
        textAlign: "center",
        cursor: "pointer",
        color: "#fff",
        marginLeft: "5px",
        marginBottom: "0px",
        marginTop: "5px"
    }
    render() {
        const { getContactLogsRemark, otherParams } = this.props;
        const { store } = this.state;
        const { saveRemarkCmd, remarks, setInputValue, setShow, show, inputValue } = store;
        const { creater, replyDate, replyTime, content, replyMainId, replyId, remarktype, rUser, crmid } = remarks;
        const { id, departmentName, jobTitle, name, type } = creater;

        return (
            <div className='crm-contact-remark-item' style={{ whiteSpace: "normal", wordBreak: " break-all" }} id={replyId}>
                <div style={{ margin: "5px 0px", display: "flex" }}>
                    {
                        remarktype == "remark" ?
                            <span dangerouslySetInnerHTML={{ __html: "<a href='javaScript:openhrm(" + id + ");' onclick='pointerXY(event);'>" + name + "</a> " }}></span>
                            :
                            <span dangerouslySetInnerHTML={{ __html: "<a href='javaScript:openhrm(" + id + ");' onclick='pointerXY(event);'>" + name + "</a> " + getLabel(117, "回复") + " <a href='javaScript:openhrm(" + rUser.id + ");' onclick='pointerXY(event);'>" + rUser.name + "</a> " }}></span>
                    }
                    <div style={{ margin: "0px 15px", display: "flex", color: "#B3A6B3" }}>
                        <div className="crm-contact-reply-item-row2-date">{replyDate}</div>
                        <div style={{ paddingLeft: "5px" }}>{replyTime}</div>
                    </div>
                </div>
                <div style={{ position: "relative", margin: "5px 0px", fontSize: "12px", color: "#595959"  }}>
                    <span style={{ wordBreak: "break-word" }} dangerouslySetInnerHTML={{ __html: Base64.decode(content) }} onClick={(e) => { setShow(!show); e.stopPropagation(); }}></span>
                    <div onClick={(e) => { setShow(!show); e.stopPropagation(); }} className="crm-contact-reply-item-row2-icon" style={{ position: "absolute", right: "0px", bottom: "-5px", cursor: "pointer" }} >
                        <svg t="1573449253768" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4878" width="22" height="22">
                            <path d="M810.666667 213.333333a64 64 0 0 1 64 64v426.666667a64 64 0 0 1-64 64H478.336l-146.645333 96.106667A21.333333 21.333333 0 0 1 298.666667 846.250667V768h-85.333334a64 64 0 0 1-64-64V277.333333a64 64 0 0 1 64-64h597.333334z m0 64H213.333333v426.666667h149.333334v63.296L459.242667 704H810.666667V277.333333zM539.306667 490.666667v64H362.666667v-64h176.64zM661.333333 362.666667v64H362.666667v-64h298.666666z" p-id="4879" fill="#7478b5" />
                        </svg>
                    </div>
                </div>
                {show && <div>
                    <WeaError tipPosition='top' ref='weaError' error={getLabel(514759, "评论内容为空")} style={{ width: "100%" }}>
                        <WeaTextarea value={inputValue} onChange={setInputValue} />
                    </WeaError>
                    <div style={{ margin: "10px 5px", display: "flex" }}>
                        <button onClick={(e) => { saveRemarkCmd({ workPlanId: replyMainId, parentId: replyId, receiver: id, customer: crmid, ...otherParams }); e.stopPropagation(); }} style={{ backgroundColor: " #67B5E9", border: "1px #50A9E4 solid", ...this.button }}>{getLabel(826, "确定")}</button>
                        <button onClick={(e) => { setShow(false); e.stopPropagation(); }} style={{ backgroundColor: " #919191", ...this.button }}  > {getLabel(201, "取消")}</button>
                    </div>
                </div>
                }
            </div>
        )
    }
}